<template>

  <div class="shop" v-loading='loading'>
    <!-- <FormSearch
      class="header"
      ref="formSearch"
      :forms="searchForm"
      @handleSearch="handleSearch"
      @handleReset="handleReset"
    /> -->
    <div style="display:flex;justify-content: end;">
      <el-form ref="from" :model="query" :inline="true">



        <el-form-item label="">
          <el-select v-model="query.shopStatus" size="mini" clearable placeholder="选择小店状态">
            <el-option label="已审核" :value="1" />
            <el-option label="待审核" :value="2" />
            <el-option label="被驳回" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="query.shopTypeId" size="mini" clearable placeholder="选择小店分类">
            <el-option :label="item.title" :value="item.id" v-for="item in shopList" :key="item.id" />
            <!-- <el-option  label="小店买单（优惠买单）" :value="4" />
        <el-option  label="小店商品" :value="5" />
        <el-option  label="红包充值 " :value="20" />
        <el-option  label="平台商品" :value="6" /> -->
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="" ><el-input  v-model="query.sellerId" size="mini" clearable placeholder="请输入小店账号" /></el-form-item>
    <el-form-item label="" ><el-input  v-model="query.mobile" size="mini" clearable placeholder="请输入购买人账号" /></el-form-item> -->

        <el-form-item>
          <el-button type="primary" size="mini" @click="handleSearch">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table class="table-box" :data="tableData" style="width:100%" :cell-style="tc" :max-height="screenHight"
      :header-cell-style="tccolor">
      <el-table-column prop="memberId" label="UID">
        <!-- <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :value="true" :manual="true" content="退费犹豫期" placement="top-end" v-if="scope.row.vip_shop_delete_status == 1">
              <p style="text-align:bottom">{{scope.row.memberId}}</p>
            </el-tooltip>
            <p v-else>{{scope.row.memberId}}</p>
          </template> -->
      </el-table-column>
      <el-table-column prop="name" label="小店名称"></el-table-column>
      <el-table-column prop="memberMobile" label="小店账号"></el-table-column>
      <el-table-column label="门店地址" width="160">
        <template slot-scope="scope">{{ scope.row.shopAddress }} </template>
      </el-table-column>
      <el-table-column label="商家分类">
        <template slot-scope="scope">
          <p v-if="scope.row.shopTypeText">{{ scope.row.shopTypeText }}</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label="入驻类型">
        <template slot-scope="scope">
          <p v-if="scope.row.sellerType == 1">收款门店</p>
          <p v-if="scope.row.sellerType == 2">实体门店</p>
          <p v-if="scope.row.sellerType == 3">企业连锁</p>
          <p v-if="scope.row.sellerType == 4">商场百货</p>
          <!-- <p v-if="scope.row.vip_shop_pay_type == 1">年费会员店</p>
            <p v-if="scope.row.vip_shop_pay_type == 2">押金会员店</p> -->
        </template>
      </el-table-column>
      <el-table-column label="服务费扣点" prop="serviceFeeRate">
        <template slot-scope="scope">
          <p v-if="scope.row.partnerCommissionPercent">{{ scope.row.partnerCommissionPercent +
            scope.row.platformCommissionPercent }}%</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label="服务经理" prop="serviceManager" />
      <!-- <el-table-column  label="小店状态" prop="audit_status_name" /> -->
      <el-table-column label="操作" width="240">
        <!--  v-if="hasBtn('20101') || hasBtn('20102')" -->
        <template slot-scope="scope">
          <el-button size="mini" @click="watchDetail(scope.row.id)">入驻信息</el-button>
          <el-button size="mini" @click="goShopMember(scope.row)">查看会员</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background @current-change="pageChange" :current-page="query.pageNum" :page-size="query.pageSize"
        :page-sizes="[20]" layout="total, sizes, prev, pager, next, jumper" :total="total" />
    </div>
    <ShopJoinDetail ref="shopJoinDetail" :joinInfo="joinInfo" />
  </div>
</template>

<script>
import FormSearch from '@/components/FormSearch'
import ShopJoinDetail from './shopJoinDetail'
import { shopList, shopEnterManagerDetailData } from "@/api/shopList";
// import { shopEnterManagerDetailData } from '@/api/shopdetail'
import { shopTypeList } from "@/api/goods";
// import store from "@/store";
export default {
  components: {
    // FormSearch,
    ShopJoinDetail
  },
  data() {
    return {
      loading: true,
      dialogVisible: false,
      total: 0,
      tableData: [],
      page: 1,
      size: 20,
      height: 710,
      query: {
        pageNum: 1,
        pageSize: 20,
        uid: sessionStorage.getItem("memberId"),
        // keyword:'',
        partnerId: sessionStorage.getItem("partnerId"),
        shopTypeId: undefined,
        shopStatus: undefined,

        // sellerId:0,
        // shopTypeId:0,
        // shopStatus:0,
        // shopName:'',
        // search:'',

      },
      searchForm: {
        form: [
          {
            type: 'select',
            key: 'is_vip_shop',
            placeholder: '请选择小店状态',
            options: [
              {
                label: '申请中',
                value: '2'
              },
              {
                label: '入驻中',
                value: '1'
              },
              {
                label: '已过期',
                value: '0'
              }
            ]
          },
          {
            type: 'select',
            key: 'type_id',
            placeholder: '请选择商家分类',
            asyncFunc: shopTypeList,
            optionLabel: 'title',
            optionValue: 'id'
          },
          {
            type: 'select',
            key: 'pay_type',
            placeholder: '请选择入驻类型',
            options: [
              {
                label: '年费会员店',
                value: '1'
              },
              {
                label: '押金会员店',
                value: '2'
              },
              {
                label: '小店',
                value: '0'
              }
            ]
          },
        ]
      },
      form: {},
      shopList: [],
      joinInfo: {}
    };
  },
  created() {
    this.height = Number(localStorage.getItem('height'))
    console.log(this.height)
  },
  mounted() {
    this.getShopListData();
  },
  beforeRouteLeave(to, from, next) {
    // ...
    if (to.name === 'home_shopMember') {
      from.meta.keepAlive = true
    } else {
      from.meta.keepAlive = false
    }
    next()
  },
  methods: {
    //获取小店列表
    async getShopListData(params) {
      let res = await shopList(this.query);
      if (res.code === 200) {
        this.loading = false
        // res.data.list.forEach(item => {
        //   item.shopStatus = (item.vip_shop_end_time > new Date().getTime() / 1000) ? '入驻中' : '已过期'
        // })
        this.tableData = res.data.list;
        this.total = res.data.total;
      } else {
        this.loading = false
        this.$message(res.message)
      }
      const shopType = await shopTypeList()
      console.log(shopList, 'shopList')
      this.shopList = shopType.data
    },
    pageChange(page) {
      this.query.pageNum = page
      // const params = {
      //   page,
      //   ...this.form,
      //   size: this.size
      // }
      this.getShopListData();
    },
    handleSearch() {
      this.query.pageNum = 1
      // this.form = formValue
      // const params = {
      //   page: 1,
      //   ...formValue,
      //   size: this.size
      // }
      this.getShopListData()
    },
    handleReset() {
      // this.form = {}
      // this.page = 1
      // const params = {
      //   page: 1,
      //   size: this.size
      // }
      this.query.pageNum = 1
      this.getShopListData(this.query)
    },
    //查看会员
    goShopMember(row) {
      this.$router.push({
        path: 'shopMember',
        query: { shopId: row.id, shopName: row.shop_name, mobile: row.mobile }
      })
    },
    //打开小店详情
    openShopDetail(id) {
      this.$router.push({ path: "./shoplistDetail", query: { shopid: id } });
    },

    //完善入驻信息
    async watchDetail(id) {
      // console.log(id)
      this.$refs.shopJoinDetail.show()
      await shopEnterManagerDetailData(id).then(res => {

        if (res.code === 200) {
          const item = this.shopList.find(item => {
            return item.id === res.data.type_id
          })
          // res.data.shopType = item.title
          this.joinInfo = res.data
          if (this.joinInfo.idPicture) {
            this.joinInfo.idPicture = this.joinInfo.idPicture.split(',')
          } else {
            this.joinInfo.idPicture = []
          }

        } else {
          this.$message(res.message)
        }
      })
      //  this.$router.push({
      //   path: "./residenceinformation",
      //   query: { cid: id ,type:2,isWatchOrEdit:false}
      // });
    },
    tc() {
      return 'text-align:center; color:#333333; font-size:12px;'
    },
    tccolor() {
      return 'text-align:center;background-color:#f5f5f5; font-size:14px;'
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  position: relative;
  background-color: #fff;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;

  .header {
    float: right;
  }

  .table-box {
    height: calc(100vh - 220px);
  }

  .pagination {
    position: absolute;
    bottom: 15px;
    right: 20px;
    z-index: 99;
  }
}
</style>
